/* CSS HALAMAN POSTING */

#content-wrapper{
  background-color:#ccc;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
margin:0 auto;
padding:10px 0 10px;
overflow:hidden;
width:100%;
}


#main-wrapper{
  background-color:white;
  background-image:-webkit-linear-gradient(top,#dedede,white 100px);
  background-image:-moz-linear-gradient(top,#dedede,white 100px);
  background-image:-ms-linear-gradient(top,#dedede,white 100px);
  background-image:-o-linear-gradient(top,#dedede,white 100px);
  background-image:linear-gradient(top,#dedede,white 100px);
  border:2px solid #888;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  margin:0 5px 10px 8px ;
  width:67%;
  display:inline;
  float:left;
  -webkit-animation:myfirst 1s;
  -moz-animation:myfirst 1s;
  -ms-animation:myfirst 1s;
  -o-animation:myfirst 1s;
  animation:myfirst 1s;
}

#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}

#ad-wrapper{
  width:28.8%;
  float:right;
  font:0.8125em/1.5 Ubuntu,&quot;Trebuchet MS&quot;,Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  text-align:left;
  background-color:#333;
  border:4px solid #ddd;
  color:#666;
  display:inline;
  float:right;
  margin:0 8px 10px 0px;
  padding:0px;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
  display:inline;
  word-wrap:break-word;
  overflow:hidden;
  position:relative;
  animation:myfirst 2s;
  -webkit-animation:myfirst 2s;
  -moz-animation:myfirst 2s;
  -ms-animation:myfirst 2s;
  -o-animation:myfirst 2s;
}


#ad-1 {
  display:block;
  text-align:center;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  margin:7px;
  padding:10px;
}

#ad-1 a img {
  width:120px;
  height:120px;
  background:transparent;
  -webkit-box-shadow:0 0 2px black;
  -moz-box-shadow:0 0 2px black;
  box-shadow:0 0 2px black;
  padding:4px;
  border: 3px solid rgb(192, 192, 192);
  border-radius: 70px 70px 70px 70px;
  transition: all 0.6s ease-out 0s;
}

#ad-1 img:hover {
    border-radius: 5px 5px 5px 5px;
}

#ad-1 a:hover img {
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
}

#sidebar1, #sidebar-tengah {
  width:28.8%;
  float:right;
  font:0.8125em/1.5 Ubuntu,&quot;Trebuchet MS&quot;,Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  text-align:left;
  background-color:#333;
  border:4px solid #ddd;
  color:#666;
  display:inline;
  float:right;
  margin:0 8px 10px 0px;
  padding:0px;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
  display:inline;
  word-wrap:break-word;
  overflow:hidden;
  position:relative;
  animation:myfirst 2s;
  -webkit-animation:myfirst 2s;
  -moz-animation:myfirst 2s;
  -ms-animation:myfirst 2s;
  -o-animation:myfirst 2s;
}

#sidebar1 .widget-content, #sidebar-tengah .widget-content{
padding:0 0 0 10px;
}

#sidebar1 h2.headactive {
  background-image:-webkit-linear-gradient(top,#3c3c3c,#333);
  background-image:-moz-linear-gradient(top,#3c3c3c,#333);
  background-image:-ms-linear-gradient(top,#3c3c3c,#333);
  background-image:-o-linear-gradient(top,#3c3c3c,#333);
  background-image:linear-gradient(top,#3c3c3c,#333);
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  border-color:#555 transparent #222;
}

#sidebar1 a {
  color:#999;
  text-decoration:none;
  text-shadow:0 1px 0 black;
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
}

#sidebar1 a:hover,
#sidebar1 a:visited:hover {
  color:white;
  text-decoration:none;
}

.sidebar ul {
  list-style:none;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  margin:0 0 1.25em;
  padding:0;
}

.sidebar ul li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  margin:0;
  padding:3px 10px;
}

.sidebar p {
  margin:0 0 .6em;
}



h1.post-title.entry-title, .post-body h1{
  letter-spacing:0;
  border:1px dotted #bbb;
  color:#333;
  font:normal normal 150% Alike,Cambria,&#39;Book Antiqua&#39;,Georgia,Serif;
  border-width:0 1px 1px;
  padding:2px 14px;
  -webkit-transition:all 0.26s ease-in-out;
  -moz-transition:all 0.26s ease-in-out;
  -ms-transition:all 0.26s ease-in-out;
  -o-transition:all 0.26s ease-in-out;
  transition:all 0.26s ease-in-out;
}

h1.post-title.entry-title a,.post-body h1 a, h1.post-title.entry-title:hover, .post-body h1:hover{
  text-decoration:none;
  color:inherit;
}

h1.post-title.entry-title a:hover, .breadcrumbs a:hover{color:#e65c00; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out}

.info{
color:#00bfff;
font-size:9px;
text-transform:capitalize;
padding:0;
font-family:&quot;Comic Sans Ms&quot;,Arial;
}

.post h3{font-size:20px}
.post h4{font-size:18px}
.post h5{font-size:16px}
.post h6{font-size:15px}
.tengah{text-align:center}
.gambar-kanan{float:right;margin-right:10px;margin-left:10px}
.gambar-kiri{float:left;margin-right:10px;margin-left: 10px}


.post blockquote{
background:#222;
border-left:3px solid #00bfff;
font-style:italic;
margin:5px auto;
padding:10px;
font-size:1em;
width:450px;
max-width:450px;
overflow:auto;
max-height:400px;
-webkit-box-shadow:inset 0 3px 7px black;
-moz-box-shadow:inset 0 3px 7px black;
box-shadow:inset 0 3px 7px black;
color:white;
}


/*coding writing style -----------------------------*/
pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px &quot;Inconsolata&quot;,&quot;Monaco&quot;,&quot;Consolas&quot;,&quot;Andale Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace;
color:#333;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
border-radius:5px;
}

pre[data-codetype] {
padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}

pre[data-codetype=&quot;HTML&quot;] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype=&quot;CSS&quot;] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype=&quot;JavaScript&quot;] {border-color:#545448;color:#1F2E24;}
pre[data-codetype=&quot;JQuery&quot;] {border-color:#395540;color:#2E2E27;}
pre[data-codetype=&quot;PHP&quot;] {border-color:#FF9900;color:#865003;}
pre[data-codetype=&quot;XML&quot;] {border-color:#FF0C39;color:#790015;}
pre[data-codetype=&quot;HTML&quot;]:before {background-color:#0B7E88;}
pre[data-codetype=&quot;CSS&quot;]:before {background-color:#7B990C;}
pre[data-codetype=&quot;JavaScript&quot;]:before {background-color:#545448;}
pre[data-codetype=&quot;JQuery&quot;]:before {background-color:#395540;}
pre[data-codetype=&quot;PHP&quot;]:before {background-color:#FF9900;}
pre[data-codetype=&quot;XML&quot;]:before {background-color:#FF0C39;
}

.catatan {
    display: block;
    background: rgba(34, 34, 34, 0.9);
    font: italic 15px Georgia,Serif;
    color: white;
    position: relative;
    margin: 10px 7% 1.7em;
    padding: 20px 10px 10px 10px;
    text-shadow: none;
    text-align:justify;
    border: 2px solid rgb(153, 153, 153);
}

.catatan img {
  border:none;
  padding:0 0;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
  display:block;
  margin:0 auto;
}

.catatan img:hover{
-webkit-transform: scale(1.3) rotate(0);
-moz-transform: scale(1.3) rotate(0);
-o-transform: scale(1.3) rotate(0);
-ms-transform: scale(1.3) rotate(0);
transform: scale(1.3) rotate(0);
}

.catatan:before {
  content:&quot;&quot;;
  width:100%;
  height:4px;
  background-color:#4b8db5;
  background-image:-webkit-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-moz-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-ms-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-o-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  position:absolute;
  top:0;
  left:0;
}

.catatan code {font-style:normal}
.catatan h2:first-child {margin-top:0}

.catatan.resource {
  margin:10px auto;
  width:auto;
  font:normal normal 13px Tahoma,Verdana,Arial,Sans-Serif;
  padding:10px 20px;
  background-color:#eee;
}

.catatan.resource img {
  border:2px solid #aaa !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

.post-body blockquote{line-height:1.3em}

.post blockquote p{margin:.75em 0}

.post {
    border-top: 1px dotted rgb(187, 187, 187);
    border-bottom: 1px dotted rgb(187, 187, 187);
    margin: 0.3em 0px 25px;
    padding: 0px 13px;
}

.post-body {
    border-style: dotted;
    border-color: rgb(187, 187, 187);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-width: 0px 1px;
    padding: 20px 14px;
}

.post ul{margin:10px 0 7px 20px;padding:0 10px 0 5px}
.post ol{margin:10px 0 7px 20px;padding:0 5px 0 5px}
table {border-collapse:collapse;font:normal 13px Arial,Sans-Serif;-webkit-box-shadow:0 1px 3px #eee;-moz-box-shadow:0 1px 3px #eee;box-shadow:0 1px 3px #eee;}
table tr {background:rgb(241, 241, 241);}
table th, table td {vertical-align:top;padding:5px 10px;border:1px solid #3c3c3c;}
table td:nth-child(even) {background:rgb(241, 241, 241);}
table th {background:rgb(241, 241, 241);font-size:13px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);font-weight:bold;}


/* Top ribbon */
#top-ribbon {
  position:absolute;
  top:0;
  right:40%;
  z-index:10;
  width:108px;
  height:260px;
  background-color:#333;
  color:#999;
  font:normal normal 11px Verdana,Arial,Sans-Serif;
  -webkit-box-shadow:0 5px 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 5px 7px rgba(0,0,0,.7);
  box-shadow:0 5px 7px rgba(0,0,0,.7);
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
  -webkit-transition:right .15s linear;
  -moz-transition:right .15s linear;
  -ms-transition:right .15s linear;
  -o-transition:right .15s linear;
  transition:right .15s linear;
  border:1px solid #444;
  border-color:#444 #222 #222 #444;
  padding:10px;
}

#top-ribbon:after {
  content:&quot;&quot;;
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:20px;
  border:15px solid transparent;
  border-top-color:#333;
}

#top-ribbon .img-container {
  width:82px;
  border:3px double #3c3c3c;
  background:transparent;
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  display:block;
  margin:0 0 10px auto;
  padding:10px;
}

#top-ribbon .img-container img {
  display:block;
  background-color:#3c3c3c;
  padding:5px 0;
}

#level {
  width:108px;
  display:block;
  margin:0 0 0 auto;
}

#level li {
  display:block;
  margin:0 0 2px;
  list-style:none;
}

#level li a {
  display:block;
  background-color:#3c3c3c;
  color:#ccc;
  font:normal normal 8px Arial,Sans-Serif;
  text-transform:uppercase;
  position:relative;
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
  padding:6px 10px;
}

#level li a:before {
  content:&quot;&quot;;
  width:0;
  height:0;
  position:absolute;
  right:0;
  top:0;
  display:block;
  border:11px solid transparent;
  border-right-color:#333;
}

#level li a:hover {
  -webkit-transition-duration:0s;
  -moz-transition-duration:0s;
  -ms-transition-duration:0s;
  -o-transition-duration:0s;
  transition-duration:0s;
  color:white;
  text-decoration:none;
  padding:6px 0 6px 15px;
}

#level li.satu a:hover {background-color:#DC98FF}
#level li.dua a:hover {background:#FF5DC2}
#level li.tiga a:hover {background:#0186CB}
#level li.eks a:hover {background:#0251C9}
#level li.current a {border-left:2px solid #39f}


#zai {
    text-align: center;
    border: 1px solid rgb(60, 60, 60);
    box-shadow: 0px 0px 3px black inset;
    color:white;
    background-color: rgb(51, 51, 51);
}

#zai ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
}

#zai li { /* Mengatur orientasi menu menjadi horizontal */
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
  position:relative;
}

#zai a {
  display:block; /* Penting! */
  padding:0px 15px;
  line-height:30px;
  text-decoration:none;
  color:white;
  border-right: 1px solid rgb(34, 34, 34);
background-color: rgb(51, 51, 51);
}

#zai a:hover {
  background-color:darkblue; /* Warna menu saat pointer mouse berada di atasnya */
}

#zai li ul {
  width:170px;
  height:auto;
  position:absolute;
  top:100%;
  left:0px;
  z-index:10;
  display:none; /* Menyembunyikan submenu */
}

#zai ul li ul li a{
border-bottom: 1px solid rgb(34, 34, 34);
}

#zai li li {
  display:block; /* Menetralkan display:inline */
  float:none;    /* Menetralkan float:left */
}

#zai li:hover &gt; ul {
  display:block; /* Menampilkan submenu yang disembunyikan */
}

#zai li ul ul {
  left:100%; /* Menggeser anak menu level 3 dan di atasnya ke sebelah paling kanan */
  top:0px;
}


#menupost {
    text-align: center;
    border: 1px solid rgb(60, 60, 60);
    box-shadow: 0px 0px 3px black inset;
    color:white;
    background-color: rgb(51, 51, 51);
}

#menupost ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
}

#menupost li { /* Mengatur orientasi menu menjadi horizontal */
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
  position:relative;
}

#menupost a {
  display:block; /* Penting! */
  padding:0px 15px;
  line-height:30px;
  text-decoration:none;
  color:white;
  border-right: 1px solid rgb(34, 34, 34);
background-color: rgb(51, 51, 51);
}

#menupost a:hover {
  background-color:darkblue; /* Warna menu saat pointer mouse berada di atasnya */
}

#menupost li ul {
  width:170px;
  height:auto;
  position:absolute;
  top:100%;
  left:0px;
  z-index:10;
  display:none; /* Menyembunyikan submenu */
}

#menupost ul li ul li a{
border-bottom: 1px solid rgb(34, 34, 34);
}

#menupost li li {
  display:block; /* Menetralkan display:inline */
  float:none;    /* Menetralkan float:left */
}

#menupost li:hover &gt; ul {
  display:block; /* Menampilkan submenu yang disembunyikan */
}

#menupost li ul ul {
  left:100%; /* Menggeser anak menu level 3 dan di atasnya ke sebelah paling kanan */
  top:0px;
}

.breadcrumbs{
background-color: rgb(68, 68, 68);
border-style: dotted;
border-color: rgb(187, 187, 187);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-width: 1px 1px 0px;
font-size: 80%;
color: rgb(102, 102, 102);
text-transform: uppercase;
font-weight: 700;
padding: 4px 14px;
}


pre{word-wrap:normal;padding:5px 5px 5px 35px;margin:0;background:rgb(190, 190, 190);outline:1px solid rgb(38, 29, 26);border:#999 solid 1px;line-height:20px;width:93.5%;overflow:auto}
code{font-size:100%;text-align:left;margin:0;padding:0;color:#000}
.sharing,.feedburnering,.informasi{background:#f1f1f1;margin:13px 0;padding:6px;border:#3c3c3c solid 2px;overflow:hidden}
.sharing span{float:left}
.feedburner-onpost{color:#333;background-color:#f1f1f1;border-radius:5px;padding:7px}
.feedinput{margin:0;padding:4px;font-size:12px;color:#53524b;border:#dedede solid 1px;width:220px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px}
.related_posts{background-color:#1e1e1e 70%;margin-top:5px; padding:0 10px; border:2px solid #00bfff;}
.related_posts h4{color:white; font:bold 14px/14px &quot;Electrolize&quot;,Arial,sans-serif; padding:7px 0; border-bottom:double 3px #00bfff}
.related_posts ul{padding:0}
.related_posts ul li{list-style:none; padding:4px 5px 4px 10px; line-height:18px; border-bottom: 1px dotted white;}


.sandal-jepit{
margin:5px 0px 5px;
font-size:12px;
text-align:left;
padding: 2px 8px;
}



.feedburnering p {margin-bottom:10px;color=#666}

#blog-pager-newer-link{float:left;line-height:1.9em;font-weight:bold}
#blog-pager-older-link{float:right;line-height:1.9em;font-weight:bold}
#blog-pager.blog-pager {margin:1em 0 1em}
#blog-pager{width:98%;text-align:center;line-height:1.9em;font-weight:bold;margin:10px 0 0}
#blog-pager a:link{color:#00bfff;}
#blog-pager a:link,#blog-pager a:hover,#blog-pager a:visited{font-size:11px!important;font-weight:bold;background:#f1f1f1;border:#ccc solid 1px;padding:2px 10px;border-radius:1px 1px;-moz-border-radius:1px 1px 1px 1px;-khtml-border-radius:1px 1px 1px 1px;-webkit-border-radius:1px 1px 1px 1px;border-radius:1px 1px 1px 1px}
@media screen and (min-width:720px) and (max-width:980px){
	#wrapper{padding:10px 0 10px 0;width:100%;}
	#header, #content-wrapper, #nav,footer{width:100%}
	#main-wrapper{width:67%}
	#sidebar1, #sidebar-tengah, #ad-wrapper{width:28.8%}
	.sidebar {padding:10px}
	#sidebar2, #sidebar3, #sidebar4 {width:29.9%;margin-bottom:0.5em;padding:0 1% 0 1% }
}
@media screen and (max-width:720px){
	#main-wrapper,#sidebar1, #sidebar-tengah, #header{width:100%;margin:0 auto;padding:0}
	#sidebar2, #sidebar3, #sidebar4 {width:99%;margin:0 auto;padding:0}
	#content-wrapper{padding:0}
	#wrapper{padding:10px 0 10px 0;width:100%}
	#header h1{font-size:20px;}
	#nav li a{display:block;text-decoration:none;color:white;padding:1px 5px 1px 5px;background:#333;margin-top:2px;border:#3c3c3c solid 1px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
	#nav li {width:49%}
}
@media screen and (max-width:240px){#header h1{font-size:17px;}}
